<template>
	<view class="login">
		<view class="title">{{ title }}</view>
		<view class="subTitle">{{ welcome }}</view>
		<form class="cl">
			<view class="login-form-item">
				<input v-model="userInfo.username" placeholder="请输入登录用户名" maxlength="30" />
			</view>
			<view class="login-form-item">
				<input v-model="userInfo.password" type="password" placeholder="请输入登录密码" maxlength="16" />
			</view>
			<view class="login-form-item captcha">
				<input v-model="captchaCode" class="captcha-input" type="number" placeholder="请输入验证码" maxlength="4" />
				<image :src="captcha" @click="getCaptcha" class="captcha-img"></image>
			</view>
			<button hover-class="button-hover" @tap="login()">登 录</button>
		</form>
	</view>
</template>
<script>
	import {
		captcha
	} from '@/api/system/captcha'

	import {
		login
	} from '@/api/system/login'
	import {
		setToken
	} from '@/utils/token'
	import {
		isEmpty
	} from '@/utils/verify.js'
	import {
		getHour
	} from '@/utils/time.js'


	export default {
		data() {
			return {
				// 标题
				title: '若依管理系统',
				// 欢迎语
				welcome: '',
				// 图形验证码信息
				captcha: null,
				userInfo: {
					// 登录账号
					username: 'admin',
					// 密码
					password: 'admin123',
				},
				// 验证码
				captchaCode: '',
				// UUID
				uuid: ''
			};
		},
		created() {
			// 获取图形验证码
			this.getCaptcha();
		},
		onShow() {
			// 获取欢迎语
			this.getWelcome();
		},
		methods: {
			// 根据时间获取欢迎语
			getWelcome() {
				const hour = getHour();
				if (hour >= 6 && hour < 9) {
					this.welcome = '早上好!';
				} else if (hour >= 9 && hour < 12) {
					this.welcome = '上午好!';
				} else if (hour >= 12 && hour < 14) {
					this.welcome = '中午好!';
				} else if (hour >= 14 && hour < 18) {
					this.welcome = '下午好!';
				} else if (hour >= 18 && hour < 24) {
					this.welcome = '晚上好!';
				} else {
					this.welcome = '早点休息吧!';
				}
			},
			// 获取图形验证码
			getCaptcha() {
				const app = this
				captcha().then(result => {
					app.captcha = 'data:image/gif;base64,' + result.data.img
					app.uuid = result.data.uuid
				})
			},
			// 验证表单内容
			validItem() {
				if (isEmpty(this.userInfo.username)) {
					this.$showToast('请输入用户名', 'error', 2000)
					return false
				}
				if (isEmpty(this.userInfo.password)) {
					this.$showToast('请输入密码', 'error', 2000)
					return false
				}
				if (isEmpty(this.captchaCode)) {
					this.$showToast('请输入验证码', 'error', 2000)
					return false
				}
				return true
			},
			// 确认登录
			login() {
				if (this.validItem()) {
					const app = this
					const loginInfo = {
						username: app.userInfo.username,
						password: app.userInfo.password,
						code: app.captchaCode,
						uuid: app.uuid
					}
					login(loginInfo).then(result => {
						if (result.data.code === 200) {
							app.$showToast('登录成功', 'success', 2000)
							setToken(result.data.token)
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							app.$showToast(result.data.msg, 'error', 2000)
							app.getCaptcha()
						}
					})
				}

			},
		}
	};
</script>
<style lang="scss" scoped>
	@import 'style.css';
</style>